    <template>
        <div class="park-button" :class="[{'park-button-blank': blank},{'park-button-largemax': large}]">
          <el-button :type="type" @click="bntClick" v-bind="$attrs" :loading="loading" :size="size" v-if="!custom"><slot></slot></el-button>
          <div v-else class="park-button-custom">222222</div>
        </div>
    </template>
  
  <script setup lang="ts">
  import { ref, defineProps, defineEmits } from "vue";
  const emits = defineEmits(["click"]);
  const props = defineProps({
    type: {
      type: String,
      default: "primary",
    },
    size: {
      type: String,
      default: "middle",
    },
    loading: {
      type: Boolean,
      default: false,
    },
    loadingtext: {
      type: String,
      default: "请求中...",
    },
    disabled:{
      type:Boolean,
      default: false
    },
    bold:{
      type: Boolean,
      default: false,
    },
    blank:{
      type: Boolean,
      default: false,
    },
    large:{
      type: Boolean,
      default: false,
    },
    custom:{
      type: Boolean,
      default: false,
    },  
  });
  
  // 防抖函数
  function debounce(fn:any, delay:any) {
    let timeoutId:any = null;
    return function (...args:any) {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }
  
  // 防抖处理函数
  function handleDebounceInput(e) {
    console.log("防抖处理函数");
    if (props.loading || props.disabled) {
      return;
    }
    emits("click", e);
  }
  
  const bntClick = debounce(handleDebounceInput, 200);
  </script>
  
  <style lang="scss" scoped> 
  // ::v-deep .park-button-blank .el-button{
  //   width: 100%!important;
  // }
  .park-button{
    &-blank {
      ::v-deep .el-button {
        width: 100%;
      }
    }
    &-largemax{
      ::v-deep .el-button {
        padding: 20px 12px!important;
        height: 60px;
        border-radius:60px;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
//   .pk-button {
//     cursor: pointer;
//     &:hover{
//       opacity: 0.6;
//     }
//     &-default {
//       background: #fff;
//       border: #ddd 1px solid;
//       border-radius: 4px;
//     }
//     &-gray {
//       background: #cdcdcd;
//       border: #cdcdcd 1px solid;
//       color: #fff;
//       border-radius: 4px;
//     }
//     &-graye8 {
//       background: #E8E8E8;
//       border: #E8E8E8 1px solid;
//       color: #333;
//       border-radius: 4px;
//     }
//     &-green {
//       background: #186e30;
//       // border: #186e30 1px solid;
//       color: #fff;
//       position: relative;
//       border-radius: 4px;
//     }
//     &-green::after{
//       position: absolute;
//       top:0;
//       left:0;
//       bottom:0;
//       right: 0;
//       border: #186e30 1px solid;
//     }
//     &-planggreen{
//       border:1px solid #186e30;
//       border-radius: 4px;
//       color: #186e30;  
//     }
//     &-plangray {
//       border:1px solid #555;
//       border-radius: 4px;
//       color: #555;  
//     }
//     &-bold{
//       font-weight: bold!important;
//     }
//     &-pink{
//       background: #FFEEF2;
//       border: #FFEEF2 1px solid;
//       color: #FF4E72;
//       border-radius: 4px;
//     }
//     &-small {
//       height: 28px;
//       line-height: 28px;
//       text-align: center;
//       font-size: 12px;
//       padding: 0 12px;
//       word-break: break-all;
//       overflow: hidden;
//     }
//     &-csmall {
//       height: 32px;
//       line-height: 30px;
//       text-align: center;
//       font-size: 12px;
//       padding: 0 12px;
//       word-break: break-all;
//       overflow: hidden;
//       min-width: 82px;
//     }
//     &-defaultsize { 
//       height: 32px;
//       line-height: 32px;
//       text-align: center;
//       font-size: 14px;
//       padding: 0 16px;
//     }
//     &-middle {
//       width: 90px;
//       height: 34px;
//       line-height: 34px;
//       text-align: center;
//       font-size: 14px;
//     }
//     &-disabled{
//       opacity: 0.5;
//     }
//     &-loading {
//       opacity: 0.5;
//     }
//   }
  </style>
  